<!--
 * @Author: White
 * @description: 网易云音乐
 * @LastEditTime: 2021-09-01 11:48:49
-->

<template>
    <div class="music">
        <!-- 轮播图 -->
        <div class="banner">
            <Banner/>
        </div>
        <!-- 推荐歌单 -->
        <div class="recommend">
            <HotRecommend/>
        </div>
        <!-- 独家放送 -->
        <div class="private">
            <PrivateContent/>
        </div>
        <!-- 最新音乐 -->
        <div class="newMusic">
            <NewMusic/>
        </div>
        <!-- 推荐MV -->
        <div class="mv">
            <RecomMv/>
        </div>
        <div class="zhubo">
            <AnchorRadio/>
        </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref, defineComponent, reactive } from 'vue'
import Banner from '@/components/MusicView/banner'
import HotRecommend from '@/components/MusicView/HotRecommend.vue'
import PrivateContent from '@/components/MusicView/PrivateContent'
import NewMusic from '@/components/MusicView/NewMusic'
import RecomMv from '@/components/MusicView/RecomMv'
import AnchorRadio from '@/components/MusicView/AnchorRadio'
// 左侧组件
import Login from '@/components/MusicView/Login'
import { getLogin } from '@/api/music'
import { validateVIphone } from "@/utils/loginRules";
import { setCookie } from '@/utils/cookie'
export default defineComponent({
  components: {
    Banner,
    HotRecommend,
    PrivateContent,
    NewMusic,
    RecomMv,
    AnchorRadio,
    Login
  },
  setup () {
    const router = useRouter()
    // 登录弹窗
    const isLogin = ref()
    // 表单绑定数据
    const loginForm = reactive({
        phone: '',
        password: ''
    })
    const parmas = reactive({
        search: ''
    })
    // 邮箱验证
    let validateIphone = (rule, value, callback) => {
      if (value == "") callback(new Error("账号(手机)不能为空！"));
      else if (validateVIphone(value)) {
        callback(new Error("手机格式有误！"));
      } else {
        callback();
      }
    };
    // 密码验证
    let validatePassword = (rule, value, callback) => {
      if (value == "") callback(new Error("密码不能为空！"))
      else callback()
    }
    // 表单验证
    const rules = reactive({
      phone: [
        { validator: validateIphone, trigger: "blur" }
      ],
      password: [
        { validator: validatePassword, trigger: "blur" }
      ]
    })
    // 子组件触发的弹窗
    const register = (val) => {
        isLogin.value = val
    }
    // 搜索
    const InputSearch = async () => {
        router.push({
            path: '/music/search',
            query: { id: 123 }
        })
    }
    return {
      loginForm,
      rules,
      isLogin,
      parmas,
      register,
      InputSearch
    }
  }
})
</script>

<style lang="scss" scoped>
    .music {
        max-width: 1200px;
        height: calc(100vh - 77px);
        margin: 0 auto;
        position: relative;
        .content {
            width: 100%;
            border-radius: 10px;
            position: absolute;
            left: 0;
            right: 0;
            top: 40px;
            margin: 0 auto;
            box-shadow: 20px 0 20px 2px #e6e6e6, -20px 0 20px 2px #e6e6e6, 0 20px 20px 2px #e6e6e6;
            .content-header {
                height: 50px;
                background-color: #f5f5f5;
                display: flex;
                align-items: center;
                border-radius: 10px 10px 0px 0px;
                .content-header-options {
                    width: 200px;
                    height: 50px;
                    padding: 0px 20px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .content-header-circle {
                        span {
                            margin: 0px 4px;
                        }
                        .red {
                            width: 10px;
                            height: 10px;
                            display: inline-block;
                            border-radius: 50%;
                            background-color: rgb(255, 92, 92);
                        }
                        .yellow {
                            width: 10px;
                            height: 10px;
                            display: inline-block;
                            border-radius: 50%;
                            background-color: rgb(255, 187, 56);
                        }
                        .green {
                            width: 10px;
                            height: 10px;
                            display: inline-block;
                            border-radius: 50%;
                            background-color: rgb(41, 202, 56);
                        }
                    }
                    .back-next {
                        i {
                            cursor: pointer;
                        }
                    }
                }
                .content-header-nav {
                    width: 1000px;
                    ul {
                        display: flex;
                        align-items: center;
                        li:first-child {
                            margin-left: 20px;
                        }
                        li {
                            margin-right: 20px;
                            span {
                                font-size: 14px;
                                font-weight: 300;
                            }
                        }
                        .search {
                            input {
                                width: 140px;
                                height: 26px;
                                line-height: 26px;
                                border: none;
                                outline:none;
                                border-radius: 10px;
                                background-color: #ececec;
                                padding-left: 26px;
                                background-image: url('../../assets/images/搜索.png');
                                background-repeat: no-repeat;
                                background-size: 12px 12px;
                                background-position: 8px 8px;
                                font-size: 10px;
                                font-weight: 300;
                            }
                        }
                    }
                }
            }
            .content-main {
                width: 100%;
                height: calc(70vh - 32px);
                display: flex;
                .content-main-left {
                    width: 200px;
                    height: 100%;
                    background-color: #eaeaea;
                }
                .content-main-right {
                    width: 1000px;
                    height: auto;
                    background-color: #ffffff;
                    padding: 0px 20px;
                    box-sizing: border-box;
                    overflow: scroll;
                    overflow-x: hidden;
                    .banner {
                        margin: 10px 0px;
                    }
                    .recommend {
                        .title {
                            height: 30px;
                            display: flex;
                            align-items: center;
                            h3 {
                                line-height: 30px;
                                font-size: 16px;
                                color: #000;
                                font-weight: 700;
                                text-decoration: none
                            }
                        }
                        .recommend-wrap {
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            .recommend-item:nth-child(5) {
                                margin-right: 0px;
                            }
                            .recommend-item:nth-child(10) {
                                margin-right: 0px;
                            }
                            .recommend-item {
                                width: 170px;
                                height: 170px;
                                margin-right: 10px;
                                margin-bottom: 50px;
                                border-radius: 4px;
                                position: relative;
                                cursor: pointer;
                                img {
                                    width: 170px;
                                    height: 170px;
                                    cursor: pointer;
                                    border-radius: 4px;
                                }
                                p {
                                    font-size: 14px;
                                    font-weight: 400;
                                    line-height: 20px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .play {
                                    font-size: 14px;
                                    font-weight: 300;
                                    line-height: 20px;
                                    position: absolute;
                                    top: 10px;
                                    right: 10px;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            .content-progress {
                width: 100%;
                height: 60px;
                background-color: #fff;
                border-radius: 0px 0px 10px 10px;
            }
            .login-dialog {
                width: 350px;
                height: 410px;
                padding: 10px 20px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                z-index: 200;
                box-sizing: border-box;
                border-radius: 10px;
                // background: rgba(255, 255, 255, 0.504);
                background-color: #fff;
                box-shadow: 0 18px 32px 0 rgba( 31, 38, 135, 0.37 );
                backdrop-filter: blur( 19.0px );
                -webkit-backdrop-filter: blur( 19.0px );
                border-radius: 10px;
                transform: scale(1);
                .login-header {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
                .login-content {
                    padding: 0px 20px;
                    .login-bg {
                        margin-bottom: 20px;
                        img {
                            width: 100%;
                            height: 100px;
                            opacity: .5;
                            // -webkit-filter: blur(1px);
                        }
                    }
                    :deep(.el-form-item) {
                        margin-bottom: 20px;
                        input {
                            height: 30px;
                        }
                    }
                    :deep(.el-form-item__label) {
                        font-size: 10px;
                    }
                }
                .login-content {
                    text-align: center;
                    button {
                        margin-top: 10px;
                        width: 60%;
                        height: 30px;
                        line-height: 30px;
                        background-color: #cd2f2d;
                        border-radius: 6px;
                        border: none;
                        color: #fff;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
